<template>
    <div class="app-container">
      <!-- 输入表单 -->
      <el-form label-width="120px" :inline="false" >
        <el-form-item label="姓名">
          <el-input v-model="player.name" style="width: 400px;"/>
        </el-form-item>

        <!-- 俱乐部图片 -->
        <el-form-item label="人物照片">
          <el-upload
            :action="BASE_API + '/player/upload'"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
            class="avatar-uploader">
            <img v-if="player.picture" :src="player.picture" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        
        <el-form-item label="国家">
          <el-select v-model="player.countryId" clearable placeholder="请选择">
          <el-option
            v-for="item in countryList"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
        </el-form-item>
        <el-form-item label="年龄">
          <el-input v-model="player.age" style="width: 400px;"/>
        </el-form-item>

        <el-form-item label="学历">
          <el-select v-model="player.educationId" clearable placeholder="请选择">
          <el-option
            v-for="item in educationList"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
        </el-form-item>

        <el-form-item label="游戏">
          <el-select v-model="player.gameId" clearable placeholder="请选择">
          <el-option
            v-for="item in gameList"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
        </el-form-item>

        <el-form-item label="位置" v-if="player.gameId != null && player.gameId != ''">
          <el-select v-model="player.placeId" clearable placeholder="请选择">
          <el-option
            v-for="item in placeList"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
        </el-form-item>
        
        <el-form-item label="信誉积分">
          <el-input v-model="player.honorIntegral" style="width: 200px;"/>
        </el-form-item>

        <el-form-item label="俱乐部">
          <el-select v-model="player.clueId" clearable placeholder="请选择">
          <el-option
            v-for="item in clueList"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
        </el-form-item>

        <el-form-item label="是否退役">
          <el-radio v-model="player.retireFlag" :label=0>在役</el-radio>
          <el-radio v-model="player.retireFlag" :label=1>已退役</el-radio>
        </el-form-item>
        

        <el-form-item label="个人简介">
          <el-input v-model="player.biography" type="textarea" :rows="5"/>
        </el-form-item>
      
        
        <el-form-item>
          <el-button type="primary" @click="saveOrUpdate()">保存</el-button>
        </el-form-item>
      </el-form>
    </div>
  </template>
  
  
  <script>
  import playerApi from "@/api/player/player";
  import playerPlaceApi from "@/api/player/playerPlace";
  import clueApi from "@/api/clue/clue";
  import gameApi from "@/api/game/game";
  import educationApi from "@/api/education/education";
  import countryApi from "@/api/country/country";
  import player from "@/api/player/player";
  export default {
      data() {
          return {
              BASE_API: 'http://localhost:8888',
              player:{},
              countryList: [],
              educationList: [],
              gameList: [],
              placeList: [],
              clueList: []
              
          }
      },
      async created() {
        educationApi.getEducationList()
        .then((response) => {
          this.educationList = response.data
        })
        countryApi.getCountryList()
        .then((response) => {
          this.countryList = response.data
        })
        gameApi.getGameList()
        .then((response) => {
          this.gameList = response.data
        })
        clueApi.getClueList()
        .then((response) =>{
          this.clueList = response.data
        })
        if(this.$route.params.id){
          const id = this.$route.params.id;
          this.fetchDataById(id)
        }
      },
      watch:{
        player:{
          handler(newValue,oldValue){
            if(newValue.gameId != null && newValue.gameId != ''){
              playerPlaceApi.getPlayerPlaceList(newValue.gameId)
              .then((response) =>{
                this.placeList = response.data
              })
            }
          },
          deep: true
        }
      },
      methods: {
        fetchDataById(id){
          playerApi.getPlayerById(id)
          .then(response => {
            this.player = response.data
          })
        },
        //添加
        save(){
          playerApi.savePalyer(this.player)
          .then((response) => {
              this.$message({
                  type: 'success',
                  message: '添加成功!'
              });
              //跳转列表页面
              if(this.player.retireFlag == 0){
                this.$router.push({path:'/player/nowPlayerList'})
              }else{
                this.$router.push({path:'/player/retirePlayerList'})
              }
              
          })
        },
        //修改
        update(){
          playerApi.updatePlayer(this.player)
          .then((response) => {
              this.$message({
                  type: 'success',
                  message: '修改成功!'
              });
              //跳转列表页面
              if(this.player.retireFlag == 0){
                this.$router.push({path:'/player/nowPlayerList'})
              }else{
                this.$router.push({path:'/player/retirePlayerList'})
              }
          })
        },
        saveOrUpdate(){
          if(this.player.id){
            this.update()
          }else{
            this.save()
          }
        },
        // 上传成功回调
        handleAvatarSuccess(res, file) {
          // console.log(res)
          if (res.code==20000) {
            // console.log(res)
            this.player.picture = res.data
            // 强制重新渲染
            this.$forceUpdate()
          } else {
            this.$message.error('上传失败 （非0）')
          }
        },
  
        // 错误处理
        handleAvatarError() {
          console.log('error')
          this.$message.error('上传失败（http失败）')
        },
  
        // 上传校验
        beforeAvatarUpload(file) {
          const isJPG = file.type === 'image/jpeg'
          const isLt2M = file.size / 1024 / 1024 < 2
  
          if (!isJPG) {
            this.$message.error('上传头像图片只能是 JPG 格式!')
          }
          if (!isLt2M) {
            this.$message.error('上传头像图片大小不能超过 2MB!')
          }
          return isJPG && isLt2M
        }
      },
      
  }
  </script>
  <style>
    .avatar-uploader .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
      border-color: #409EFF;
    }
    .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 178px;
      height: 178px;
      line-height: 178px;
      text-align: center;
    }
    .avatar {
      width: 178px;
      height: 178px;
      display: block;
    }
  </style>